<template>
    <!-- components/tabbar.wxml -->
    <view v-if="!isxmgjMix()">
        <view :class="'tabbar-container ' + (isIpx ? 'IpxBot' : '')">
            <view :class="'tabbar-item ' + (item.centerItem ? 'center-item' : '')" @tap="changeItem" :data-item="item" v-for="(item, index) in tabList" :key="index"  :style="isTjhz() && item.id == 3 ? 'display: none;': isTjhz() && item.id == 4 ? 'width: 40%;': ''">
                <view class="item-top">
                    <view v-if="item.isNew" class="new"></view>
                    <image :src="currentPage == item.id ? item.selectIcon : item.icon" mode="widthFix"></image>
                </view>

                <view :class="'item-bottom ' + (currentPage == item.id ? 'item-active' : '')">
                    <view>{{ item.text }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	'use strict'; // components/tabbar.ts
	//#ifdef H5
	import { nativeCall } from '@/utils/cdgjH5toApp.js'
	//#endif
	var app = getApp();
	var scanCode = require('./../../utils/scanCode.js');
	var https_1 = require('./../../api/https.js');
	let That;
	export default {
		data() {
			return {
				//适配IPhoneX
				isIpx: false,
				//底部Tab
				tabList: [
					{
						id: 0,
						path: '../../pages/index/index',
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/home.png',
						selectIcon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/home_sel.png',
						text: '首页',
						centerItem: false
					},
					{
						id: 1,
						path: '../../pages/site/index',
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/site.png',
						selectIcon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/site_sel.png',
						text: '找桩',
						centerItem: false
					},
					{
						id: 2,
						path: '',
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/scan.png',
						selectIcon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/scan.png',
						text: '',
						centerItem: true
					},
					{
						id: 3,
						path: '../../pages/find/index',
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/find.png',
						selectIcon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/find_sel.png',
						text: '发现',
						isNew:false,
						centerItem: false
					},
					{
						id: 4,
						path: '../../pages/my/my',
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/mime.png',
						selectIcon: 'https://oos-cn.ctyunapi.cn/front-end/static/static/mime_sel.png',
						text: '我的',
						centerItem: false
					}
				]
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			currentPage: {
				type: Number,
				default: 0
			},
			isNew:{
				default: false,
        type: Boolean
      }
		},
    watch:{
	    isNew(ov){
	    	console.log(ov)
		    That.tabList[3].isNew = ov
      }
    },
		created: function () {
			// 判断为 iPhone X 给予底部距离
			var that = this;
			uni.getSystemInfo({
				success: function (res) {
					if (res.statusBarHeight == 44) {
						that.isIpx=true
					}
				}
			});
      That = this;
			if(uni.getStorageSync('token')){
				https_1.getNew().then((res) => {
					if (res.code == 0) {
						that.tabList[3].isNew = res.data
					}
				})
			}

			let timer = setInterval(()=>{
				let mixTabbarIconList = uni.getStorageSync('tabbarIconList');
				if(mixTabbarIconList.length){
					clearInterval(timer);
					(mixTabbarIconList[0] && mixTabbarIconList[0].icon) ? (this.tabList[0].icon = mixTabbarIconList[0].icon) : '';
					(mixTabbarIconList[4] && mixTabbarIconList[4].icon) ? (this.tabList[0].selectIcon = mixTabbarIconList[4].icon) : '';
					(mixTabbarIconList[1] && mixTabbarIconList[1].icon) ? (this.tabList[1].icon = mixTabbarIconList[1].icon) : '';
					(mixTabbarIconList[5] && mixTabbarIconList[5].icon) ? (this.tabList[1].selectIcon = mixTabbarIconList[5].icon) : '';
					(mixTabbarIconList[8] && mixTabbarIconList[8].icon) ? (this.tabList[2].icon = mixTabbarIconList[8].icon) : '';
					(mixTabbarIconList[8] && mixTabbarIconList[8].icon) ? (this.tabList[2].selectIcon = mixTabbarIconList[8].icon) : '';
					(mixTabbarIconList[2] && mixTabbarIconList[2].icon) ? (this.tabList[3].icon = mixTabbarIconList[2].icon) : '';
					(mixTabbarIconList[6] && mixTabbarIconList[6].icon) ? (this.tabList[3].selectIcon = mixTabbarIconList[6].icon) : '';
					(mixTabbarIconList[3] && mixTabbarIconList[3].icon) ? (this.tabList[4].icon = mixTabbarIconList[3].icon) : '';
					(mixTabbarIconList[7] && mixTabbarIconList[7].icon) ? (this.tabList[4].selectIcon = mixTabbarIconList[7].icon) : '';
				}
			},200)

			if (this.isCdgj()) {
				this.tabList[0].text = '列表'
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			// tab 切换
			changeItem:async function (e) {
				var item = e.currentTarget.dataset.item;

				if (item.id == 2) {
					//扫码
					//#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CAMERA')
					   	if (result !== 1){
							return
						}else{
							if(uni.getStorageSync('token')){
								scanCode.stateOfCharge()
							}else{
								scanCode.scanCode()
							}
						}    
					//#endif
					 
					//#ifdef MP-WEIXIN || MP-ALIPAY
						if(uni.getStorageSync('token')){
							scanCode.stateOfCharge()
						}else{
							scanCode.scanCode()
						}
					//#endif

					//#ifdef H5
					// ------- 暂不需要，使用项目内置的H5扫码功能即可 -------
					if(uni.getStorageSync('token')){
						if (this.isCdgj()) {
							const clientType = uni.getStorageSync('clientType')
							if (clientType == 'WeChat') {
								// 成都公交H5-拉起外部小程序微信扫一扫
								wx.miniProgram.redirectTo({
									url: `/pages_common/pages/otherPay/sanCode`
								});
							} else {
								// 成都公交H5-拉起外部APP扫一扫
								nativeCall('scan', null, (cbData) => {
									// 扫码后返回来的数据
									console.log('-------原生扫码--cbData--------', cbData);
									if (cbData && cbData.url) {
										scanCode.scanCodeFn(decodeURIComponent(cbData.url))
									}
								})
							}
						}
					} else {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
					}
					//#endif
				} else {
					uni.switchTab({
						url: item.path
					});
				}
			}
		}
	};
</script>
<style lang="less">
    @import url(../../commin/commin.less);  /* components/tabbar.wxss */
    view {
        /*  padding: 0;*/
        /*  margin: 0;*/
        box-sizing: border-box;
    }
    /* 适配iPhone X */
    .IpxBot {
        padding-bottom: 30rpx !important;
    }
    .tabbar-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 3;
        background: linear-gradient(0deg, @white-color, #f4f6f8);
        border: 2rpx solid rgba(255, 255, 255, 0.55);
        box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
        display: flex;
        align-items: center;
        padding: 5rpx 0;
        color: #707485;
        .tabbar-item {
            width: 20%;
            height: 118rpx;
            // @kuangao (20%,98rpx);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            .item-top {
                width: 48rpx;
                height: 48rpx;
                // @kuangao (48rpx,48rpx);
                image {
                    width: 100%;
                    height: 100%;
                    // @kuangao (100%,100%);
                }
                .new{
                    width: 10rpx;
                    height: 10rpx;
                    position: absolute;
                    top: 25rpx;
                    right: 55rpx;
                    border-radius: 50%;
                    background-color: red;
                }
            }
            .item-bottom {
                font-size: 22rpx;
                width: @percent;
            }
            .item-active {
                color:  var(--textColor) ;
            }
        }
        .center-item {
            .item-top {
                flex-shrink: 0;
                width: 138rpx;
                height: 138rpx;
                // @kuangao (138rpx,138rpx);
                position: absolute;
                top: -50rpx;
                left: calc(50% - 70rpx);
                border-radius: 50%;
            }
            .item-bottom {
                position: absolute;
                bottom: 2rpx;
            }
        }
    }
</style>
